/**
 * @author: SEKin
 * @Date: 2025-03-05 09:47:32
 * @description:  分解任务
 * @Last Modified time: 2025-03-05 09:47:32
 */
import {pureApp} from "../config"

pureApp.innerHTML = `<button id="button">count</button>
			<div style="font-size: 40px;">Click count:<span id="clickCount">0</span></div>
			<div style="font-size: 40px;">Loop count:<span id="loopCount">0</span></div>`;

const button = document.getElementById('button') as HTMLButtonElement;
const clickCount = document.getElementById(
  'clickCount',
) as HTMLParagraphElement;
const loopCount = document.getElementById('loopCount') as HTMLParagraphElement;

function waitSync(milliseconds: number) {
  const start = Date.now();
  while (Date.now() - start < milliseconds) {
    console.log('Waiting...');
  }
}

function processItems(items: unknown[], i:number) {
  const index = i || 0;
  var currentItem = items[index];

  console.log('processing item:', currentItem);

  if (index + 1 < items.length) {
    setTimeout(function () {
			loopCount.innerText = `${Number(loopCount.innerText) + 1}`;
			waitSync(50);
      processItems(items, index + 1);
    }, 0);
  }
}

button.addEventListener('click', () => {
  clickCount.innerText = `${Number(clickCount.innerText) + 1}`;
});

const items = new Array(100).fill(null);

processItems(items, 0); // 并行执行

// for (const i of items) {
//   console.log('Loop:', i);
//   loopCount.innerText = `${Number(loopCount.innerText) + 1}`;
//   setTimeout(() => {
//     waitSync(50);
//   });
// }

